<template>
	<view class="orders-page">
		<!-- 订单标签页 -->
		<view class="order-tabs">
			<view v-for="tab in tabs" :key="tab.value" class="order-tab" :class="{active: activeTab === tab.value}"
				@click="changeTab(tab.value)">
				{{ tab.label }}
			</view>
		</view>

		<!-- 订单列表 -->
		<view class="order-list">
			<view class="order-card" v-for="order in orders" :key="order.id">
				<view class="order-header">
					<view class="order-merchant">
						<uni-icons type="shop" size="16" color="#666" />
						<text>{{ order.merchant }}</text>
					</view>
					<view class="order-status">{{ order.statusText }}</view>
				</view>

				<view class="order-items" @click="toDetail(order)">
					<view class="order-item" v-for="item in order.items" :key="item.id">
						<view class="order-item-image">
							<image :src="item.image" mode="aspectFill" />
						</view>
						<view class="order-item-info">
							<view class="order-item-title">{{ item.title }}</view>
							<view class="order-item-sku">{{ item.sku }}</view>
							<view class="order-item-price-qty">
								<view class="order-item-price">¥{{ item.price }}</view>
								<view class="order-item-qty">x{{ item.quantity }}</view>
							</view>
						</view>
					</view>
				</view>

				<view class="order-footer">
					<view class="order-total">
						共{{ order.totalItems }}件商品 合计:
						<text class="order-total-price">¥{{ order.totalPrice }}</text>
						（含运费¥{{ order.shippingFee }}）
					</view>
					<view class="order-actions">
						<button v-for="action in order.actions" :key="action.text" class="order-action-btn"
							:class="{primary: action.primary}" @click="handleAction(action.type, order.id)">
							{{ action.text }}
						</button>
					</view>
				</view>
			</view>
		</view>

		<!-- 订单为空 -->
		<view class="order-empty" v-if="orders.length === 0">
			<uni-icons type="file-text" size="60" color="#ddd" />
			<text class="order-empty-text">暂无相关订单</text>
			<button class="order-empty-button" @click="goShopping">去逛逛</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const tabs = ref([{
			label: '全部',
			value: 'all'
		},
		{
			label: '待付款',
			value: 'pending_payment'
		},
		{
			label: '待发货',
			value: 'pending_shipment'
		},
		{
			label: '待收货',
			value: 'pending_receipt'
		},
		{
			label: '待评价',
			value: 'pending_review'
		},
		{
			label: '退款/售后',
			value: 'after_sales'
		}
	]);
	const toDetail = (order) => {
		uni.navigateTo({
			url: `/subpackage_order/order/order_detail?id=${order.id}`
		});
	};
	const activeTab = ref('all');

	const orders = ref([{
			id: 1,
			merchant: '名创优品旗舰店',
			statusText: '待付款',
			totalItems: 1,
			totalPrice: '49.9',
			shippingFee: '0',
			items: [{
				id: 101,
				image: 'https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f',
				title: '便携式蓝牙音箱 无线迷你音响',
				sku: '颜色：蓝色 | 容量：标准版',
				price: '49.9',
				quantity: 1
			}],
			actions: [{
					text: '取消订单',
					type: 'cancel',
					primary: false
				},
				{
					text: '去支付',
					type: 'pay',
					primary: true
				}
			]
		},
		// 其他订单数据...
	]);

	const changeTab = (tab) => {
		activeTab.value = tab;
		// 这里可以添加根据tab筛选订单的逻辑
	};

	const handleAction = (type, orderId) => {
		console.log('处理订单操作:', type, orderId);
		// 根据操作类型执行不同逻辑
	};

	const goBack = () => {
		uni.navigateBack();
	};

	const goShopping = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
</script>

<style lang="scss" scoped>
	.orders-page {
		padding-bottom: 20px;

		.order-tabs {
			display: flex;
			background-color: #fff;
			border-bottom: 1px solid var(--border-color);
			position: sticky;
			top: 0;
			z-index: 10;

			.order-tab {
				flex: 1;
				text-align: center;
				padding: 12px 0;
				font-size: 14px;
				position: relative;

				&.active {
					color: var(--primary-color);
					font-weight: bold;

					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
						width: 20px;
						height: 3px;
						background-color: var(--primary-color);
						border-radius: 1.5px;
					}
				}
			}
		}

		.order-list {
			padding: 10px;
		}

		.order-card {
			background-color: #fff;
			border-radius: 8px;
			overflow: hidden;
			margin-bottom: 15px;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
		}

		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 15px;
			border-bottom: 1px solid var(--border-color);

			.order-merchant {
				display: flex;
				align-items: center;
				font-size: 14px;
				font-weight: bold;

				text {
					margin-left: 5px;
				}
			}

			.order-status {
				font-size: 13px;
				color: var(--primary-color);
			}
		}

		.order-items {
			padding: 0 15px;
		}

		.order-item {
			display: flex;
			padding: 12px 0;
			border-bottom: 1px solid var(--border-color);

			&:last-child {
				border-bottom: none;
			}
		}

		.order-item-image {
			width: 70px;
			height: 70px;
			border-radius: 5px;
			overflow: hidden;
			margin-right: 10px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.order-item-info {
			flex: 1;
		}

		.order-item-title {
			font-size: 14px;
			margin-bottom: 5px;
			line-height: 1.3;
		}

		.order-item-sku {
			font-size: 12px;
			color: #999;
			margin-bottom: 5px;
		}

		.order-item-price-qty {
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}

		.order-item-price {
			color: var(--text-color);
		}

		.order-footer {
			display: flex;
			flex-direction: column;
			padding: 12px 15px;
			border-top: 1px solid var(--border-color);
			background-color: #fafafa;
		}

		.order-total {
			font-size: 13px;
			margin-bottom: 10px;
			align-self: flex-end;
		}

		.order-total-price {
			font-weight: bold;
		}

		.order-actions {
			display: flex;
			gap: 10px;
			align-self: flex-end;
		}

		.order-action-btn {
			padding: 6px 12px;
			border-radius: 15px;
			font-size: 12px;
			border: 1px solid #ddd;
			background-color: #fff;

			&.primary {
				background-color: var(--primary-color);
				color: white;
				border: none;
			}

			&::after {
				border: none;
			}
		}

		.order-empty {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 50px 0;

			.order-empty-text {
				font-size: 16px;
				color: #999;
				margin: 20px 0;
			}

			.order-empty-button {
				padding: 8px 20px;
				background-color: var(--primary-color);
				color: white;
				border-radius: 20px;
				font-size: 14px;

				&::after {
					border: none;
				}
			}
		}
	}
</style>